<template>
  <div>
    <el-button>新建文章</el-button>
    <!-- 按钮组: 添加 / 删除选中 -->
    <el-row class="btns">
      <el-input
        size="mini"
        style="width: 240px"
        placeholder="按分类查询"
        v-model="input1"
      ></el-input>
      <el-button class="btn-search1" size="mini" icon="el-icon-search"
        >查询</el-button
      >
      <el-input
        size="mini"
        style="width: 240px"
        placeholder="按标题查询"
        v-model="input2"
      ></el-input>
      <el-button class="btn-search2" size="mini" icon="el-icon-search">
        查询
      </el-button>
      <el-card class="article-table">
        <el-table border stripe :data="articleData">
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="操作">
            <el-button size="mini">
              编辑
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="danger" size="mini">
              删除
              <i class="el-icon-delete"></i>
            </el-button>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Article',
  data() {
    return {
      input1: '',
      input2: '',
      articleData: [
        { id: 1, title: '夏野了' },
        { id: 2, title: '夏耶了' },
        { id: 3, title: '夏也了' },
      ],
    }
  },
}
</script>
<style>
.btns {
  margin-top: 10px;
  padding: 10px;

  background-color: #ddd;
}
.btns btn-search1 {
  padding: 10px;
}
.article-table {
  margin-top: 20px;
}
</style>
